import React, { useState } from 'react';
import { Layout, Tabs, Select } from 'antd';
import PersonalInfo from '../components/PersonalInfo';
import MedicalInfo from '../components/MedicalInfo';
import CDAIScore from '../components/CDAIScore';
import ChatPanel from '../components/ChatPanel';
import CustomButton from '../components/CustomButton';
import styles from './index.less';

const { Header, Content } = Layout;

export default function HomePage() {
  const [activeTab, setActiveTab] = useState('cdai');

  const tabItems = [
    {
      key: 'personal',
      label: '个人信息',
      children: (
        <div className={styles.tabContent}>
          <PersonalInfo />
        </div>
      ),
    },
    {
      key: 'medical',
      label: '基本医疗信息',
      children: (
        <div className={styles.tabContent}>
          <MedicalInfo />
        </div>
      ),
    },
    {
      key: 'cdai',
      label: '克罗恩病疾病活动指数(CDAI)评分表',
      children: (
        <div className={styles.tabContent}>
          <CDAIScore />
        </div>
      ),
    },
  ];

  return (
    <div className={styles.container}>
      <div className={styles.mainContent}>
        <div className={styles.header}>
          <div className={styles.title}>
            智能随访系统 | 湘雅三医院消化内科
          </div>
          <div className={styles.scenarioSelector}>
            <span className={styles.scenarioSelectorText}>请选择场景</span>
            <Select defaultValue="patient" style={{ width: 120 }} className={styles.scenarioSelect}>
              <Select.Option value="patient">患者随访</Select.Option>
            </Select>
          </div>
        </div>
        
        <Content className={styles.content}>
          <div className={styles.leftPanel}>
            <div className={styles.panelHeader}>
              <h2 className={styles.panelTitle}>随访问卷</h2>
              <CustomButton 
                text="返回问卷" 
                onClick={() => console.log('返回问卷')} 
              />
            </div>
            
            <Tabs 
              activeKey={activeTab} 
              onChange={setActiveTab}
              items={tabItems}
              className={styles.questionnaireTabs}
            />
          </div>

          <div className={styles.rightPanel}>
            <div className={styles.panelHeader}>
              <h2 className={styles.panelTitle}>智能对话</h2>
            </div>

            <ChatPanel />
          </div>
        </Content>
      </div>
    </div>
  );
}
